<template>
    <br><br>
    <div class="comment-container">
    <el-divider content-position="center">评论</el-divider>
    <h3>发表评论</h3>
    <!-- 评论多行文本输入控件 -->
    <textarea
        v-model="message"
        :placeholder="placeholder"
        name="comment"
        id="comment-area"
        cols="60"
        rows="10"
        ></textarea>
            <br><br>
    <div>
        <button @click="submit" class="submitBtn">发布</button>
    </div>
    
    <br>
    <p>已有 {{ comments.length }} 条评论</p>
    <hr>

    <!-- 渲染所有评论内容 -->
    
    <div
        v-for="comment in comments"
        :key="comment.id"
        >
        <el-card shadow="hover">
        <div class="comments">
        <div>
            <span class="username">
            {{ comment.author.username }}
            </span>
            于
            <span class="created">
            {{ formatted_time(comment.created) }}
            </span>
            <span v-if="comment.parent">
            对
            <span class="parent">
                {{ comment.parent.author.username }}
            </span>
            </span>
            说道：
        </div>
        <div class="content">
            {{ comment.content }}
        </div>
        <div>
            <button class="commentBtn" @click="replyTo(comment)">回复</button>
        </div>
        
        </div>
        <hr>
        </el-card>
    </div>
    
    </div>
    
</template>

<script>
    import axios from 'axios';
    import authorization from '@/utils/authorization';

    export default {
        name: 'Comments',
        // 通过 props 获取当前文章
        props: { article: Object },
        data: function () {
        return {
            // 所有评论
            comments: [],
            // 评论控件绑定的文本和占位符
            message: '',
            placeholder: '说点啥吧...',
            // 评论的评论
            parentID: null
        }
        },
        // 监听 article 对象
        // 以便实时更新评论
        watch: {
        article() {
            this.comments = this.article !== null ? this.article.comments : []
        }
        },
        methods: {
        // 提交评论
        submit() {
            const that = this;
            authorization()
            .then(function (response) {
                if (response[0]) {
                axios
                    .post('/api/comment/',
                    {
                        content: that.message,
                        article_id: that.article.id,
                        parent_id: that.parentID,
                    },
                    {
                        headers: {Authorization: 'Bearer ' + localStorage.getItem('access.myblog')}
                    })
                    .then(function (response) {
                    // 将新评论添加到顶部
                    that.comments.unshift(response.data);
                    that.message = '';
                    alert('留言成功')
                    })
                }
                else {
                alert('请登录后评论。')
                }
            })
        },
        // 对某条评论进行评论
        // 即二级评论
        replyTo(comment) {
            this.parentID = comment.id;
            this.placeholder = '对' + comment.author.username + '说:'
        },
        // 修改日期显示格式
        formatted_time: function (iso_date_string) {
            const date = new Date(iso_date_string);
            return date.toLocaleDateString() + '  ' + date.toLocaleTimeString()
        },
        }
    }
</script>

<style scoped>
    button {
        cursor: pointer;
        border: none;
        outline: none;
        color: whitesmoke;
        border-radius: 5px;
    }
    .submitBtn {
        height: 35px;
        background: steelblue;
        width: 60px;
    }
    .submitBtn:hover{
        background:black;
    }
    .commentBtn {
        height: 25px;
        background: lightslategray;
        width: 40px;
    }
    .commentBtn:hover{
        background:black;
    }
    .comments {
        padding-top: 10px;
        font-family:Microsoft YaHei;
    }
    .username {
        font-weight: bold;
        color: darkorange;
        font-family:SimHei;
    }
    .created {
        font-weight: bold;
        color: darkblue;
        font-family:SimHei;
    }
    .parent {
        font-weight: bold;
        color: orangered;
        font-family:SimHei;
    }
    .content {
        font-size: large;
        padding: 15px;
    }
    .comment-container{
        padding-left:250px;
        padding-right:250px;
    }
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>